<template>
  <div id="Home">
    <div class="banner">
      <img src="/static/img/Banner_1_2019_03_01_09_44_14.jpg" alt>
      <img src="/static/img/Banner_1_2019_02_21_17_36_30.jpg" alt>
      <div class="arrow arrowLeft fa fa-angle-left"></div>
      <div class="arrow arrowRight fa fa-angle-right"></div>
      <ul>
        <li class="fa fa-arrow-circle-down"></li>
        <li class="fa fa-arrow-circle-up"></li>
      </ul>
     
    </div>
    <div class="menu-box">
      <div class="menu-list">
        <ul>
          <li class="menu-list-item">
            <img src="/static/img/Banner_18_2018_07_20_19_17_12.jpg" alt>
            <span>比萨</span>
          </li>
          <li class="menu-list-item">
            <img src="/static/img/Banner_18_2018_02_02_16_40_55.jpg" alt>
            <span>小吃</span>
          </li>
          <li class="menu-list-item">
            <img src="/static/img/Banner_18_2017_08_28_14_25_23.jpg" alt>
            <span>饮料</span>
          </li>
          <li class="menu-list-item">
            <img src="/static/img/269_197135.jpg" alt>
            <span>全部餐品</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="phone-app-box">
      <div class="app-remark">
        <span class='app-remark-title'>
          <a href>下载</a> 必胜客全新App
        </span>
        <ul>
          <li>
            <i class="fa fa-check-circle"></i>
            <span>外送订餐更方便</span>
          </li>
          <li>
            <i class="fa fa-check-circle"></i>
            <span>餐厅和外送消费都能赚V金积分</span>
          </li>
          <li>
            <i class="fa fa-check-circle"></i>
            <span>全新V金商城，好礼兑不停</span>
          </li>
          <li>
            <i class="fa fa-check-circle"></i>
            <span>优惠券商城，独家优惠天天享</span>
          </li>
          <li>
            <i class="fa fa-check-circle"></i>
            <span>超级App，轻松好用，一手掌控</span>
          </li>
        </ul>
      </div>
      <div class="down-content">
        <div class="down ios-down">
          <img src="/static/img/appdown-iphone.png" alt>
          <a href="#" class="app-down-btn">iOS下载</a>
        </div>
        <div class="down android-down">
          <img src="/static/img/appdown-android.png" alt>
          <a href="#" class="app-down-btn">Android下载</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      title: "There is Home"
    };
  }
};
</script>

<style>

#Home {
  width: 1200px;
  height: 100%;
}
.banner {
  position: relative;
  width: 100%;
  height: 370px;
}

.banner img {
  position: absolute;
  width: 100%;
  height: 370px;
  display: block;
}
.banner .arrow {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 167px;
  background-color: white;
  border-radius: 50%;
  opacity: 0.2;
  line-height: 40px;
  text-align: center;
  font-size: 36px;
}
.banner .arrow:hover {
  opacity: 0.8;
  cursor: pointer;
}

.banner .arrowLeft {
  left: 20px;
}
.banner .arrowRight {
  right: 20px;
}

.banner ul {
  position: absolute;
  width: 100%;
  height: 30px;
  bottom: 0px;
  text-align: center;
  color: white;
  font-size: 24px;
}
.banner ul li {
  margin: 0 10px;
  cursor: pointer;
  opacity: 0.2;
}
.banner ul li:hover {
  opacity: 0.8;
}
.menu-box {
  position: relative;
  width: 100%;
  height: 240px;
  background-color: #f2ece4;

  display: flex;
  justify-content: center;
}

.menu-box .menu-list {
  position: absolute;
  background-color: white;
  margin: 20px auto;
  width: 90%;
  height: 200px;
  border-radius: 10px;
}

.menu-box .menu-list ul {
  list-style: none;
}
.menu-box .menu-list ul li {
  margin: 15px 15px;
  float: left;
  width: 140px;
  height: 180px;
  cursor: pointer;
}
.menu-box .menu-list ul li:hover {
  font-weight: bold;
}
.menu-box .menu-list ul li img {
  width: 140px;
  height: 140px;
}
.menu-box .menu-list ul li span {
  margin-top: 10px;
  display: inline-block;
  width: 140px;
  height: 30px;
  font-size: 14px;
  text-align: center;
}
.phone-app-box{
  position:relative;
  width:100%;
  height:249px;
  background:url('/static/img/appdown-bg.png')
}
.phone-app-box .app-remark{
  position:absolute;
  left:100px;
  top:30px;
  width:300px;

}
.phone-app-box .app-remark .app-remark-title{
  display:inline-block;

  font-size:26px;
  height:70px;
  color:#f40;
  padding:0;
}
.phone-app-box .app-remark .app-remark-title a{
  display:inline-block;
  height:70px;
  border-top:3px solid #f40;
  color:#f40;
  line-height:70px;
}

.phone-app-box .app-remark ul{
  list-style:none;
}

.phone-app-box .app-remark ul li{
  font-size:14px;
  font-weight:bold;
  color:#503c3c;
  margin-top:5px;
}

.phone-app-box .app-remark ul li i{
  color:#f40;
  font-size:16px;
}

.phone-app-box  .down-content{
  position:absolute;
  left:500px;
  height:200px;
  top:80px;
}
.phone-app-box .down-content .down{
  float:left;
  /* position:absolute; */
  margin-right:80px;
  width:94px;
}
.phone-app-box .down-content .down .app-down-btn{
  margin-top:10px;
  display:inline-block;
  height:28px;
  width:94px;
  border:1px solid #f40;
  border-radius:14px;
  font-size:14px;
  text-align:center;
  color:#f40;
  line-height:28px;
  transition: all 0.3s ease-out;
}
.phone-app-box .down-content .down .app-down-btn:hover{
  color:white;
  background-color:#f40;
}
</style>
